<template>
  <div class="stock-history">
    <a-card title="选股历史">
      <a-table 
        :columns="columns" 
        :data-source="historyData" 
        rowKey="id"
        :pagination="false"
        v-bind:row-selection="rowSelection"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'code'">
            {{ record.code }}
          </template>
          <template v-else-if="column.key === 'name'">
            {{ record.name }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-button type="link" size="small" @click="viewDetails(record)">详情</a-button>
            <a-divider type="vertical" />
            <a-button type="link" size="small" danger @click="removeFromHistory(record)">移除</a-button>
          </template>
        </template>
      </a-table>
      <div style="margin-top: 16px; text-align: right;">
        <a-button type="primary" :disabled="selectedRowKeys.length !== 2" @click="compareStocks">开始对比</a-button>
      </div>
      <a-card v-if="compareResult" class="compare-result" title="对比结果" style="margin-top: 24px;">
        <div v-html="compareResult"></div>
      </a-card>
    </a-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'

const columns = [
  { title: '股票代码', dataIndex: 'code', key: 'code' },
  { title: '股票名称', dataIndex: 'name', key: 'name' },
  { title: '操作', key: 'action' }
]

const historyData = ref([
  { id: 1, code: '600519', name: '贵州茅台' },
  { id: 2, code: '000001', name: '平安银行' },
  { id: 3, code: '300750', name: '宁德时代' },
  { id: 4, code: '600036', name: '招商银行' },
  { id: 5, code: '002415', name: '海康威视' },
  { id: 6, code: '601318', name: '中国平安' },
  { id: 7, code: '600276', name: '恒瑞医药' }
])

const selectedRowKeys = ref([])
const selectedRows = ref([])
const compareResult = ref('')

const rowSelection = computed(() => ({
  type: 'checkbox',
  selectedRowKeys: selectedRowKeys.value,
  onChange: (keys, rows) => {
    selectedRowKeys.value = keys
    selectedRows.value = rows
  }
}))

function viewDetails(record) {
  message.info(`查看详情: ${record.name}(${record.code})`)
}

function removeFromHistory(record) {
  historyData.value = historyData.value.filter(item => item.id !== record.id)
  message.success('已从历史记录中移除')
}

function compareStocks() {
  if (selectedRows.value.length !== 2) return
  const [a, b] = selectedRows.value
  // 优化对比逻辑，输出更详细、结构化的对比内容
  let result = ''
  if ((a.code === '600519' && b.code === '300750') || (a.code === '300750' && b.code === '600519')) {
    result = `
      <div style="font-size:1.08rem;font-weight:600;margin-bottom:8px;">贵州茅台 vs 宁德时代</div>
      <table style="width:100%;border-collapse:collapse;margin-bottom:8px;">
        <tr style="background:#f5f5f5;"><th style="padding:4px 8px;">维度</th><th style="padding:4px 8px;">贵州茅台</th><th style="padding:4px 8px;">宁德时代</th></tr>
        <tr><td style="padding:4px 8px;">行业</td><td>白酒/消费品</td><td>新能源/动力电池</td></tr>
        <tr><td style="padding:4px 8px;">成长性</td><td>稳健增长，现金流强</td><td>高速成长，研发投入大</td></tr>
        <tr><td style="padding:4px 8px;">风险</td><td>波动小，防御性强</td><td>波动大，受政策影响</td></tr>
        <tr><td style="padding:4px 8px;">分红</td><td>高分红，回报稳定</td><td>分红较少，重投入</td></tr>
        <tr><td style="padding:4px 8px;">投资建议</td><td>适合长期稳健型投资者</td><td>适合看好新能源赛道的激进投资者</td></tr>
      </table>
      <div style="color:#888;font-size:0.96rem;">两者均为行业龙头，投资风格和风险收益特征差异明显，建议结合自身风险偏好选择。</div>
    `
  } else {
    result = `
      <div style="font-size:1.08rem;font-weight:600;margin-bottom:8px;">${a.name} vs ${b.name}</div>
      <ul style="margin:0 0 8px 18px;padding:0;font-size:1rem;">
        <li>行业属性、成长性、风险收益特征各有不同。</li>
        <li>建议结合公司基本面、行业前景和自身风险偏好综合判断。</li>
      </ul>
      <div style="color:#888;font-size:0.96rem;"></div>
    `
  }
  compareResult.value = result
}
</script>

<style scoped>
.stock-history {
  max-width: 600px;
  margin: 60px auto;
}
.compare-result {
  background: #f6ffed;
  border-left: 4px solid #52c41a;
}
</style>